<!-- 施工效果图 -->
<template>
	<view class="flex-col page" style="border-top: solid 0.5px #F3F3F3;">
		<view class="flex-row group_1 u-m-t-30">
			<!-- <text class="text_22">完善施工效果图</text> -->
			<!-- 		<view class="flex-row " style=" display: flex; 
            flex-wrap: wrap; "> -->
			<!-- 效果图 -->
			<view class="sty-flex" v-if="this.wsIMG != ''">
				<view v-for="(item,i) in wsIMG" :key="i" @click="previewImg()">
					<image :src="item" class="equal-division-item image_1">
				</view>
			</view>
			<!-- 无数据时 -->
			<view class="flex-row w-full" v-else>
				<u-empty mode="data" width="150" marginTop="90%" textSize="30rpx"
					icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
			<!-- </view> -->
		</view>
	</view>


</template>

<script>
	export default {
		components: {},
		data() {
			return {
				wsIMG: [],
				wsIMGs: [
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg',
					'http://16zhuangcheng.cn/8DDFB8005E7E47229149C91B9A3AFBAE.jpg'
				],
				buildIMG: [],
				ordersId: ''
			};
		},
		onLoad(option) {
			this.ordersId = option.ordersId
		},
		created() {
			this.imglist();
			uni.startPullDownRefresh();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//预览轮播图
			previewImg(current) {
				const urls = this.wsIMG.map(item => {
					console.log(item);
					return item
				})
				uni.previewImage({
					current,
					urls,
				})
			},

			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						beforePage.$vm.$refs.projectEx.getJD();
					}

				})
			},
			imglist() {
				this.$http('common.buildIMG', {
					ordersId: this.ordersId
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data);
						this.wsIMG = res.data.completePictures.split(',');
						console.log(this.wsIMG)
						this.buildIMG = res.data.pictures.split(',');
						console.log(this.buildIMG)
					}
				}).catch(err => {
					// uni.showToast({
					// 	title: err.msg
					// })
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	uni-view {
		display: flex;
		flex-wrap: wrap;

	}

	.back-w {
		display: flex;
		flex-direction: row;
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.text_22 {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		height: 50rpx;
		line-height: 50rpx;
	}

	.equal-division-item {
		border-radius: 16rpx;
		width: 214rpx;
		height: 214rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		height: 100%;
	}

	.group_1 {
		padding: 0rpx 32rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.image_4 {
		margin-top: 32rpx;
		align-self: flex-start;
	}

	.sty-flex {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		align-items: center;
		justify-content: start;
		gap: 20rpx
	}

	.image_1 {
		flex: 1 1 214rpx;
	}

	.image_2 {
		margin-left: 22rpx;
		flex: 1 1 214rpx;
	}

	.image_3 {
		margin-left: 22rpx;
		flex: 1 1 214rpx;
	}
</style>
